<template xmlns="http://www.w3.org/1999/html">
<div style="display: flex">
  <div style="width: 360px" v-if="showMsgSideBar">
    <el-row style="height: 240px">
      <el-button @click="this.$store.commit('emptyMessage')">
        清空
      </el-button>
      <el-button @click="()=>{this.showMsgSideBar=!this.showMsgSideBar}">
        折叠
      </el-button>
      <view v-for="mes in message">{{mes.date}}:{{mes.text}}</view>
    </el-row>
  </div >
  <el-button v-if="!showMsgSideBar" @click="()=>{this.showMsgSideBar=!this.showMsgSideBar}">
    显示消息
  </el-button>
  <el-row style="flex-grow: 10">
    <el-col :span="20">
      <router-view></router-view>
    </el-col>
    <el-col :span="4">
      <el-affix>
        <el-menu router
                 active-text-color="#ffd04b"
                 background-color="#545c64"
                 default-active="card"
                 text-color="#fff"
                 :default-openeds="['card']"
        >
          <el-sub-menu index="card">
            <template #title>
              全部卡面
            </template>
            <el-menu-item v-for="card in cardList" :index="'/card/'+card.id">
              <el-popover v-if="isKp" placement="left" @before-enter="deleteCheck=0">
                <template #reference>
                  <tiny-card style="width: 100%" :card="card"></tiny-card>
                </template>
                <label @mouseleave="deleteCheck=0">
                  <el-button icon="delete" :type="deleteCheck!==0?'danger':''"
                             @click="()=>{if(this.deleteCheck!==0){this.$store.commit('deleteCardList',card.id)}else deleteCheck++}"></el-button>

                </label>
                <el-button :icon="card.PLVisible?'view':'hide'"
                           @click="this.$store.commit('toggleCardHidden',card.id)"></el-button>
              </el-popover>

              <tiny-card v-else style="width: 100%" :card="card"></tiny-card>
            </el-menu-item>
            <el-menu-item v-if="isKp" @click="this.$store.commit('pushCardList',emptyCard())">
              <template #title>
                添加空卡面
              </template>
            </el-menu-item>
          </el-sub-menu>
          <el-menu-item index="/battle">
            <template #title>
              战斗轮
            </template></el-menu-item>
          <el-menu-item @click="downloadRoom" index="">
            <template #title>
              导出所有数据
            </template>
          </el-menu-item>
          <el-menu-item @drop="drop" v-if="isKp" index="">
            <template #title>
              拖入文件来导入（可一次拖入多个）
            </template>
          </el-menu-item>
          <el-menu-item @mouseleave="roomClearCheck=0" v-if="isKp" @click="clearRoom()" index="">
            <template #title >
              <template v-if="roomClearCheck===0">
                清空房间数据
              </template>
              <template v-else>
                再次点击以确认
              </template>
            </template>
          </el-menu-item>
          <el-menu-item index="/connect">
            <template #title>
              连接
            </template>
          </el-menu-item>
          <el-menu-item index="/rule">
          <template #title>
            规则书
          </template>
        </el-menu-item>
        </el-menu>
      </el-affix>
    </el-col>
  </el-row>
</div>
</template>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}



:deep(.upload) {
  height: 100%;
  width: 100%;
}

nav {
  padding: 30px;
}

nav a {
  font-weight: bold;
  color: #2c3e50;
}

nav a.router-link-exact-active {
  color: #42b983;
}
</style>
<script>

import DefaultCard from "@/components/card/DefaultCard";
import TinyCard from "@/components/card/TinyCard";
import CardParser from "@/js/util/cardParser";
import Parser from "@/js/util/cardParser";
import {store} from "@/js/store";
import {emptyRoom, readRoom, roomJson, saveRoom} from "@/js/util/room";
import {View} from "@element-plus/icons-vue";

export default {
  components: {View, TinyCard, DefaultCard},

  methods: {
    drop(eve) {
      console.log(eve)
      for (const dataFile of eve.dataTransfer.files) {
        let fr = new FileReader()
        fr.readAsText(dataFile)
        fr.onload = () => {
          if (JSON.parse(fr.result).cardList!=null){
            readRoom(fr.result,true)
          }else {
            store.commit('pushCardList', CardParser.jsonToCard(fr.result))
          }
        }
      }
    },
    emptyCard() {
      return Parser.emptyCard()
    },
    downloadRoom(){
      let data=new Date()
      this.download('房间'+data.getFullYear()+data.getMonth()+1+data.getDate(),roomJson(true))
    }
  ,
    download(filename, text) {
      let pom = document.createElement('a');
      pom.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
      pom.setAttribute('download', filename);
      pom.click();
    },
    clearRoom(){
      console.log("abc")
      if (this.roomClearCheck===0){
        this.roomClearCheck++
      }else {
        this.roomClearCheck=0
        emptyRoom()
      }
    }
  },
  data() {
    return {
      deleteCheck: 0,
      roomClearCheck:0,
      showMsgSideBar:true
    }
  }
  ,
  computed: {
    cardList() {
      return this.$store.getters.visibleCardList
    },
    message(){
      return [...this.$store.state.message].reverse()
    },
    isKp(){
      return store.getters.isKP
    }
  }
  ,
  mounted() {
    document.ondragover = function (e) {
      e.preventDefault();
    }
    document.ondrop = function (e) {
      e.preventDefault();
    }
    window.addEventListener('beforeunload', function (e) {
      localStorage.setItem('room', roomJson(true))
    })

  }
  ,
  created() {
    readRoom(localStorage.getItem('room'),true)
  }
}
</script>
